<template>
  <div id="app">
    <headd></headd>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="80%"
      center
      :show-close="false"
    >
      <span>选择失物招领类别</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="centerDialogVisiblee(false)"
          width="80px"
          style="position:relative;left:16px"
          >拾取</el-button
        >
        <el-button
          type="primary"
          @click="centerDialogVisiblee(true)"
          width="80px"
          style="position:relative;left:16px"
          >丢失</el-button
        >
      </span>
    </el-dialog>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="actionRegion">
        <el-form-item label="活动区域" prop="region" class="fontCg">
          <el-select v-model="ruleForm.region" placeholder="活动区域">
            <el-option label="红湘校区" value="红湘校区"></el-option>
            <el-option label="雨母校区" value="雨母校区"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="actionType">
        <div class="block el-form-item">
          <label class="jian fontCg">
            <label style="color: red">*</label>
            活动种类
          </label>
          <div class="yi">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </div>
        </div>
      </div>
      <div class="actionTime">
        <el-form-item label="活动时间" required class="position fontCg">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="日期"
                v-model="ruleForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </div>
      <div class="actionDesc">
        <el-form-item label="活动详情" prop="desc" class="fontCg">
          <textarea v-model="ruleForm.desc" class="el-form-item2"></textarea>
        </el-form-item>
      </div>
      <div class="publish">
        <div class="fileLine" v-show="false">
          <input type="file" name="file" id="file" @change="display" />
        </div>
        <div style="height: 90%; width: 100%" class="lin">
          <img
            class="image"
            :src="picture"
            style="
              position: relative;
              top: 10%;
              height: 70%;
              width: 30%;
              left: 35%;
            "
            @click="clickFileBtn"
          />
        </div>
      </div>
      <div>
        <el-button
          style="position: relative;
    top: 20px;
    width: 50%;
    left: 25%;
"
          type="primary"
          @click="submitForm('ruleForm')"
          :plain="true"
        >
          立即发布
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import qs from "qs";
import confirm from "../../../components/confirm/index.vue";
import headd from "../../../components/pageHeader/index.vue";
export default {
  data() {
    return {
      centerDialogVisible: false,
      family: "",
      picture: require("@/assets/Add.png"),
      value: ["学习", "考研"],
      options: [
        {
          value: "学习",
          label: "学习",
          children: [
            {
              value: "考研",
              label: "考研",
            },
            {
              value: "考公",
              label: "考公",
            },
            {
              value: "文科",
              label: "文科",
            },
            {
              value: "理科",
              label: "理科",
            },
            {
              value: "工科",
              label: "工科",
            },
            {
              value: "4/6级",
              label: "4/6级",
            },
            {
              value: "计算机2级",
              label: "计算机2级",
            },
            {
              value: "早自习",
              label: "早自习",
            },
            {
              value: "晚自习",
              label: "晚自习",
            },
          ],
        },
        {
          value: "运动",
          label: "运动",
          children: [
            {
              value: "篮球",
              label: "篮球",
            },
            {
              value: "足球",
              label: "足球",
            },
            {
              value: "排球",
              label: "排球",
            },
            {
              value: "羽毛球",
              label: "羽毛球",
            },
            {
              value: "毽子",
              label: "毽子",
            },
            {
              value: "乒乓球",
              label: "乒乓球",
            },
            {
              value: "网球",
              label: "网球",
            },
            {
              value: "跑步",
              label: "跑步",
            },
            {
              value: "游泳",
              label: "游泳",
            },
            {
              value: "跳绳",
              label: "跳绳",
            },
          ],
        },
        {
          value: "舞蹈",
          label: "舞蹈",
          children: [
            {
              value: "街舞",
              label: "街舞",
            },
            {
              value: "广场舞",
              label: "广场舞",
            },
          ],
        },
        {
          value: "音乐",
          label: "音乐",
          children: [
            {
              value: "钢琴",
              label: "钢琴",
            },
          ],
        },
        {
          value: "休闲",
          label: "休闲",
          children: [
            {
              value: "奶茶",
              label: "奶茶",
            },
          ],
        },
        {
          value: "文艺",
          label: "文艺",
          children: [
            {
              value: "散步",
              label: "散步",
            },
            {
              value: "画画",
              label: "画画",
            },
            {
              value: "图书馆",
              label: "图书馆",
            },
          ],
        },
        {
          value: "游戏",
          label: "游戏",
          children: [
            {
              value: "单机",
              label: "单机",
            },
            {
              value: "网游",
              label: "网游",
            },
          ],
        },
        {
          value: "其他",
          label: "其他",
          children: [
            {
              value: "约车",
              label: "约车",
            },
            {
              value: "失物招领",
              label: "失物招领",
            },
          ],
        },
      ],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "活动",
            trigger: "change",
          },
        ],
        desc: [{ required: true, message: "请填写活动介绍", trigger: "blur" }],
      },
    };
  },
  components: {
    confirm,
    headd,
  },
  methods: {
    submitForm(formName) {
      var data = this.ruleForm;
      var date = new Date();

      if (data.date1 - 1 < date - 100000000) {
        this.$message({
          message: "日期选择错误,请重新选择!",
          type: "warning",
        });
        // this.ruleForm.date1 = "日期";
      } else {
        var that = this;
        this.$refs[formName].validate((valid) => {
          var wenjian = document.getElementById("file").files[0];
          // console.log(wenjian.type);
          if (wenjian.type == "image/jpeg" || wenjian.type == "image/png") {
            if (
              valid &&
              this.picture != require("@/assets/Add.png") &&
              wenjian.size / 1024 < 20000
            ) {
              // loading
              const loading = this.$loading({
                lock: true,
                text: "拼命上传中.......",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              //这边进行图片黄色检测和文本检测，做文明中国人，讲文明树新风
              //以下逻辑，先进行文本检测，通过后将图片上传到服务器，服务器返回图片链接，然后进行黄色检测，通过后则进行上传到数据库操作
              // console.log("正在进行文字检测");
              // http://47.97.207.71:9000/indexFind
              this.axios
                .get("http://120.78.199.38:9000/sendPost", {
                  params: {
                    message: that.ruleForm.desc,
                  },
                  // dataType:"json",
                })
                .then((res) => {
                  if (res.data == false) {
                    // console.log(res);
                    // console.log("文字检测完成");
                    //代表此时言论正确
                    //将图片上传到服务器
                    // console.log("上传文件");
                    var formdata2 = new window.FormData();
                    formdata2.append("file", wenjian);
                    return this.axios
                      .post("http://120.78.199.38:9000/upImg", formdata2)
                      .then((res) => {
                        // console.log("文件上传完成");
                        //获取图片链接
                        // console.log(res.data);
                        var linkk = res.data;
                        // console.log("正在进行图片检测");
                        // var formdata2 = new window.FormData();
                        var data = {
                          imgUrl: res.data,
                          type: 1,
                        };
                        return this.axios({
                          url:
                            "http://imgaudit.market.alicloudapi.com/greenImg",
                          method: "post",
                          headers: {
                            "Content-Type": "application/x-www-form-urlencoded",

                            Authorization:
                              "APPCODE  1463b324ac724b9b880c6a7c6d4d6ae0",
                          },
                          data: qs.stringify(data),
                        }).then((res) => {
                          if (res.data.showapi_res_body.rate < 50) {
                            // 将数据存储在数据库中;
                            //这边将数据填写到数据库中
                            var formdata = new window.FormData();
                            var data = that.ruleForm;
                            var date = new Date(data.date1);

                            //将国际时间专程年月日形式
                            var y = date.getFullYear();
                            var m = date.getMonth() + 1;
                            var d = date.getDate();
                            formdata.append("file", linkk);
                            formdata.append("address", data.region);
                            formdata.append("wx", that.family);
                            formdata.append("information", data.desc);
                            formdata.append("category", that.value[1]);
                            formdata.append("time", `${y}-${m}-${d}`);
                            formdata.append(
                              "ided",
                              that.$store.state.yb_userid
                            );
                            formdata.append(
                              "master",
                              that.$store.state.yb_usernick
                            );
                            return this.axios
                              .post(
                                "http://120.78.199.38:9000/upAcitivity",
                                formdata
                              )
                              .then((res) => {
                                loading.close();
                                this.$refs[formName].resetFields();
                                that.picture = require("@/assets/Add.png");
                                this.$message({
                                  message: "发布活动成功!",
                                  type: "success",
                                });
                              });
                          } else {
                            that.$message({
                              showClose: true,
                              message: "图片违规!",
                              type: "error",
                            });
                            loading.close();
                          }
                        });
                      });
                  } else {
                    //此时出现不正确言论
                    that.$message({
                      showClose: true,
                      message: "请文明用语后再次上传!",
                      type: "error",
                    });
                    loading.close();
                  }
                });
            } else {
              if (valid && this.picture == require("@/assets/Add.png")) {
                this.$message({
                  message: "未选择图片或者图片过大!",
                  type: "warning",
                });
              } else {
              }
            }
          } else {
            this.$message({
              message: "文件错误，请上传图片格式文件!",
              type: "warning",
            });
          }
        });
      }
    },
    centerDialogVisiblee(e) {
      console.log(e);

      if (e) {
        //丢失
        this.family = "丢失";
      }
      if (!e) {
        //拾取
        this.family = "拾取";
        // console.log("进来了" + this.family);
      }

      this.centerDialogVisible = false;
    },
    handleChange(value) {
      // console.log(value);
      if (value[1] == "失物招领") {
        this.centerDialogVisible = true;
        // console.log("你选择了失误招领");
      }
      // console.log("切换种类");
    },
    display(e) {
      var wenjian = document.getElementById("file").files[0];
      var img = URL.createObjectURL(e.target.files[0]);
      this.picture = img;
      // console.log(wenjian);
    },
    clickFileBtn() {
      document.getElementById("file").click();
    },
  },
  created() {},
};
</script>
<style scoped>
.dialog-footer {
  display: flex;
}
button[data-v-13649524] {
  left: 16px;
}
.fontCg {
  font-weight: bold;
}
.jian {
  text-align: right;
  vertical-align: middle;
  width: 100px;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
.yi {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  margin-left: 100px;
}
.el-col-11 {
  width: 110%;
}
.el-form-item {
  height: 15%;
  width: 90%;
  position: relative;
  margin: 0;
  top: 2%;
}
.el-form-item2 {
  width: 96%;
  height: 10vh;
}
.publish {
  height: 25%;
  width: 100%;
  position: relative;
  top: 2%;
}
.el-button {
  position: relative;
  left: 0px;
}
button[data-v-28dcc78a] {
  left: 0px;
}
button[data-v-0540ed3c] {
  width: 100px;
  position: relative;
  left: 0px;
  bottom: 5px;
}
.image {
  border: 1px solid;
  border-radius: 10px;
  border-color: rgb(53, 53, 53);
}
.avatar-uploader {
  text-align: center;
  position: relative;
  left: 5%;
}
.el-cascader {
  display: block;
}
.el-select {
  display: block;
}
button {
  position: relative;
  top: 20px;
  width: 50%;
  left: 25%;
}

#app {
  height: 100%;
  width: 100%;
  /* background-color: rgb(236, 234, 240); */
  background-image: url("~@/assets/bj2.jpg");
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-input--suffix .el-input__inner {
  margin: 0;
}
.demo-ruleForm {
  height: 90%;
  width: 100%;
  position: relative;
  top: 3%;
}
.fileLine {
  /* margin-left: 25%;
  margin-left: 80px; */
  width: 100%;
  text-align: center;
}
#file {
  width: 180px;
}

.actionRegion {
  /* border-bottom: 2px solid rgb(250, 250, 246); */
  /* margin-bottom: 20px; */
  padding: 15px;
}
.actionType {
  /* border-bottom: 2px solid rgb(250, 250, 246); */
  /* margin-bottom: 20px; */
  padding: 15px;
}
.actionTime {
  /* border-bottom: 2px solid rgb(250, 250, 246); */

  padding: 15px;
}
.actionDesc {
  /* border-bottom: blue 10px; */
  /* border-bottom: 2px solid rgb(250, 250, 246); */
  /* margin-bottom: 20px; */

  padding: 15px;
}
</style>
